<template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" width="100%" height="260px" />
        </van-swipe-item>
    </van-swipe>
    <!--快捷入口-->
    <van-grid :column-num="5" icon-size="80px">
        <van-grid-item v-for="value in icondata" :key="value" :icon="value.img_url" :text="value.name"
            :url="value.action.path" />
    </van-grid>
    <!-- <div class="onIcons">
        <van-swipe class="my-swipe" indicator-color="white">
            <van-swipe-item>
                <van-grid :column-num="5" icon-size="50px">
                    <van-grid-item v-for="item in icondata2" :key="item.id" :icon="item.img" :text="item.name" />

                </van-grid>
            </van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
        </van-swipe>
    </div> -->
    <hr>
    <!--商品详情-->
    <van-grid :column-num="2" :gutter="5" style="padding-bottom: 60px;">
        <van-grid-item v-for="item in productData" :key="item.product_id">
            <!-- <img src="https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/290178/15/15153/69004/685bd1caF40a2e136/6e8987e6fd4f6c0f.jpg"
                   width="100%" height="200" alt=""> -->
            <van-image width="100%" height="200"
                :src="item.img_url" />
            <div style="font-size: 18px; font-weight: 900; padding-top: 9px;">{{ item.product_name }}</div>
            <span style="color: #9a9a9a; padding-top: 4px;">{{ item.product_brief }}</span>
            <div style="color: #ea625b; font-size: 20px; padding-top: 4px;">￥<strong
                    style="font-size: 28px;">{{ item.product_price }}</strong><span>起</span></div>

            <van-button type="danger"
                style="width: 150px; height: 55px; font-size: 18px; margin-top: 10px;" @click="addBtn(item.product_id)">立即购买</van-button>
        </van-grid-item>
    </van-grid>

</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
const images = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg'
]);
const icondata = ref([])

// 快捷入口的图标
const icondata2 = ref([
    { id: 101, name: '华杉超市', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png' },
    { id: 102, name: '华杉电器', img: 'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png' },
    { id: 103, name: '米金商城', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png' },
    { id: 104, name: '米金plus', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png' },
    { id: 105, name: '米金会员', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png' },
])
// 商品详情信息
const productData=ref([])

onMounted(() => { 
    productDataApi()
})
const productDataApi = async () => { 
    axios({
        method: 'get',
        url: 'https://apis.netstart.cn/xmsc/home/page'
    }).then(res => { 
        if (res.data.code === 0) { 
            console.log(res);
            let result = res.data.data.data.sections
            console.log(result);
            images.value = result[0].body.items.map(item => item.img_url)
            icondata.value = result[1].body.items
            console.log(icondata.value);
            // icondata.value.forEach(item => { 
            //     console.log(item.action.path);
            //     return item.action.path
            // })
            const listTwo = result[4].body.items
           console.log(listTwo);
            const listTwo2 = result[6].body.items
            console.log(listTwo2);
            //商品详情数据拼接  listTwo拼接了 listTwo2 两个数组数据合并为一个数组
            productData.value = listTwo.concat(listTwo2)
            console.log(productData.value);
            
        }else{ 
            console.log("请求api失败!");
            
        }
    })
}
import { useRouter } from 'vue-router';
const router = useRouter();
//立即购买的函数
const addBtn = (id) => { 
    console.log(id);
    router.push({ name:'prodetial',query:{pid:id}})
}
</script>

<style  scoped>
.onIcons{
    height: 100px;
    width: 99%;
    background-color: white;
    border-radius: 8px;
    margin: auto;
    margin-top: 5px;
    
}
</style>